<!--班级列表无分页版-->
<template>
  <div class="table class">
    <p style="font-size: 20px; color: red"> 非正式开发，存在性能不稳定性 </p>
    <div class="container">
      <div class="search-header">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in classFilters"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input class="input-search-key" v-model="searchKey" placeholder="请输入内容" clearable></el-input>
        <el-date-picker
          :change="pickerChange()"
          v-model="dataValue"
          type="daterange"
          :clearable=true
          align="right"
          :editable=false
          size="large"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="getSearchClass()">查找班级
        </el-button>
      </div>
      <div class="el-table-style">
        <el-table
          :data="classList"
          v-loading="loading"
          :border=true
          :stripe=true
          element-loading-text="拼命加载中..."
          :header-cell-style="getRowClass">
          <el-table-column
            :resizable=false
            prop="courseId"
            label="课程编号">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="courseName"
            label="课程名称">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="gradeName"
            label="课程年级">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="subjectName"
            label="课程学科">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="year"
            label="课程年份">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="termName"
            label="课程学期">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="classId"
            label="班级编号">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="claName"
            label="班级名称">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="teacherName"
            label="教师姓名">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="topNum"
            label="班额">
          </el-table-column>
          <el-table-column
            width="115"
            :resizable=false
            prop="claStartDate"
            label="上课时间">
            <template slot-scope="scope">
                          <span>{{scope.row.claStartDate}}
                              <b v-if="scope.row.claStartDate || scope.row.claEndDate">~</b>
                              {{scope.row.claEndDate}}
                          </span>
            </template>
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="payNum"
            label="缴费人数">
          </el-table-column>
          <el-table-column
            :resizable=false
            prop="refundNum"
            label="退费人数">
          </el-table-column>
          <el-table-column
            :resizable=false
            label="班级状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                <span v-if="scope.row.classStatus == 1">未开课</span>
                <span v-if="scope.row.classStatus == 2">已开课</span>
                <span v-if="scope.row.classStatus == 3">已结课</span>
                <span v-if="scope.row.classStatus == 4">已过期</span>
                <span v-if="scope.row.classStatus == 5">已下架</span>
              </div>
              <div v-if="scope.row.status == 2">
                <span>已下架</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next, jumper"
          :total="classTotal"
          :page-size="classPageSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../config/http'
import api from '../api/api'
import {sliceString} from '../utils/stringUtil'

export default {
  name: 'earl',
  data () {
    return {
      isSearch: false,
      loading: false,
      classPage: 1,
      classPageSize: 500,
      classTotal: 0,
      chooseSearchTeacher: [
        {value: '1', label: '教师姓名'},
        {value: '2', label: '手机号'}
      ],
      classFilters: [
        {value: '1', label: '教师姓名'},
        {value: '2', label: '班级名称'},
        {value: '3', label: '课程名称'}
      ],
      classStateDialog: [
        {value: '1', label: '未开课'},
        {value: '2', label: '已开课'},
        {value: '3', label: '已结课'},
        {value: '4', label: '已过期'},
        {value: '5', label: '已下架'}
      ],
      chooseClassSemesterList: [
        {value: '1', label: '春季班'},
        {value: '2', label: '暑假班'},
        {value: '3', label: '秋季班'},
        {value: '4', label: '寒假班'},
        {value: '5', label: '短期班'},
        {value: '6', label: '活动类'}
      ],
      chooseClassYearList: [
        {value: '-6', label: '幼儿园大班'},
        {value: '1', label: '一年级'},
        {value: '2', label: '二年级'},
        {value: '3', label: '三年级'},
        {value: '4', label: '四年级'},
        {value: '5', label: '五年级'},
        {value: '6', label: '六年级'}
      ],
      courseType: [
        {value: 'Y', label: '测试课'},
        {value: 'N', label: '正式课'}
      ],
      // 体验课类型
      expClaTypeOpts: [
        {value: '1', label: '体验课大班'},
        {value: '2', label: '体验课小班'},
        {value: '3', label: 'A班'},
        {value: '4', label: 'A+班'}
      ],
      searchKey: '',
      dataValue: '',
      claStartDate: '',
      claEndDate: '',
      value: '2',
      classList: []
    }
  },
  created () {
    this.getClassList()
  },
  methods: {
    getRowClass ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'background:#EFEFEF'
      } else {
        return ''
      }
    },
    getClassList () {
      this.loading = true
      let params
      if (this.isSearch) {
        params = {
          'page': this.classPage,
          'pageSize': this.classPageSize,
          'searchKey': sliceString(this.searchKey.trim(), 60),
          'type': this.value,
          'areaCode': '',
          'startDate': this.claStartDate,
          'endDate': this.claEndDate
        }
      } else {
        params = {
          'page': this.classPage,
          'pageSize': this.classPageSize,
          'searchKey': '',
          'type': '',
          'claStartDate': '',
          'startDate': '',
          'endDate': ''
        }
      }

      http.get(api.getClassList, params).then(res => {
        if (res.code === 0) {
          this.classList = res.data.list
          this.classTotal = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }

        this.loading = false // 关掉加载框
      })
    },

    getSearchClass () {
      this.isSearch = true
      this.classPage = 1
      this.classPageSize = 500
      this.classTotal = 0
      this.getClassList()
    },

    pickerChange () {
      if (this.dataValue) {
        let startDate = this.parseDate(this.dataValue[0])
        let endDate = this.parseDate(this.dataValue[1])
        if (this.startDate === startDate && this.endDate === endDate) {
          return
        }

        this.claStartDate = startDate
        this.claEndDate = endDate
      } else {
        this.claStartDate = ''
        this.claEndDate = ''
      }
    },

    parseDate (dateStamp, format = 'date') {
      console.log('dateStamp:' + dateStamp)
      let date = new Date(dateStamp)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' '

      let formatString = Y + M + D

      if (format === 'date') {
        return formatString
      }

      const checkIfPadStart = (item) => {
        item = String(item)
        return item.length < 2 ? item.padStart(2, '0') : item
      }

      if (format === 'time') {
        const H = checkIfPadStart(date.getHours())
        const M = checkIfPadStart(date.getMinutes())
        formatString += ` ${H}:${M}`
      }

      return formatString
    },

    handleCurrentChange (val) {
      this.classPage = val
      this.getClassList()
    }
  }
}
</script>

<style lang="scss">
  .class {
    .input-search-key {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 200px;
    }

    .el-table__body-wrapper {
      min-height: 30rem;
    }

    .dialog-item-title {
      float: left;
      text-align: right;
      span {
        display: block;
        height: 40px;
        margin-bottom: 22px;
        line-height: 40px;
      }
    }

    .dialog-form {
      overflow: hidden;
      .el-form-item {
        width: 50%;
        margin-left: 10px;
        display: inline-block;
      }
    }

    .dialog-pagination {
      float: left;
      margin-top: 10px;
    }

    .choose-dialog-search {
      margin-bottom: 10px;
      .choose-class-input {
        width: 25%;
      }
    }

    .button-tag {
      margin-bottom: 10px;
      .el-button {
        padding: 8px 14px;
        font-size: 10px;
        font-weight: 300;
      }
      .vertical-top {
        vertical-align: top;
      }
    }

    .dialog_style {
      width: 600px;
      min-width: 600px;
    }
  }

</style>
